<template>
    <el-dialog 
        :title="type=='add' ? '新增' : '编辑'" 
        :model-value="visible"
        :destroy-on-close="true"
        width="900px"
        :before-close="onCancel"
        :close-on-click-modal="false"
    >
        <!-- fullscreen -->
        <el-form v-loading="loading" class="form form_height noScrollbar" ref="form"  :rules="rules" :model="form"  label-width="150px" label-position="right">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="传感器名称:" prop="sensorName">
                  <el-input class="width100" v-model="form.sensorName"  clearable placeholder="请输入传感器名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="传感器序号:" prop="sensorCode">
                  <el-input class="width100" :disabled="type=='add' ? false : true" v-model="form.sensorCode"  clearable placeholder="请输入传感器编码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="设备编码:" prop="stationId">
                  <el-select class="width100" :disabled="type=='add' ? false : true" filterable v-model="form.stationId" placeholder="请选设备编码">
                    <el-option
                        v-for="(item, index) in typeList"
                        :key="index"
                        :label="item.stationId"
                        :value="item.stationId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备号:" prop="sensorNo">
                  <el-input class="width100" v-model="form.sensorNo"  clearable placeholder="请输入设备号"></el-input>
                </el-form-item>
              </el-col>
              
            </el-row>
             <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="材质:" prop="material">
                  <el-input class="width100" v-model="form.material"  clearable placeholder="请输入材质"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="传感器类型:" prop="sensorType">
                  <el-select class="width100" :disabled="type=='add' ? false : true" v-model="form.sensorType" placeholder="请选传感器类型">
                    <el-option
                        v-for="(item, index) in typeList1"
                        :key="index"
                        :label="item.value"
                        :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="厂家:" prop="factory">
                  <el-input class="width100" v-model="form.factory"  clearable placeholder="请输入厂家"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="型号:" prop="model">
                  <el-input class="width100" v-model="form.model"  clearable placeholder="请输入型号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
           
             <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="出厂日期:" prop="produceTime">
                  <!-- <el-input class="width100" v-model="form.produceTime"  clearable placeholder="请选择出厂日期"></el-input> -->
                  <el-date-picker
                    v-model="form.produceTime"
                    type="datetime"
                    style="width: 100%;"
                    clearable
                    placeholder="选择出厂日期">
                  </el-date-picker>
                </el-form-item>
             </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog_footer">
                <el-button type="primary" @click="onSave()" :loading="loading">保 存</el-button>
                <el-button @click="onCancel">取 消</el-button>
            </span>
        </template>
        
    </el-dialog>
</template>
<script>
import abcApi from '@/api/sensor'
import commonApi from '@/api/index'

import {formatTimestamp} from '@/utils/common'
// import uploadFile from '@/components/upload/uploadFile'

export default {
    emits: ['onChange'],
    components:{
        // uploadFile
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        type:{
            default:'add',
            type: String
        },
        tabsName:{
            default:'0',
            type: String
        },
        id:{
            default:'',
        },
        item:{
            default:()=>{
                return {}
            },
            type: Object
        }
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.$nextTick(()=>{
                    this.$refs['form'].resetFields()
                })
                this.getDict()
                // this.getCity();
                if(this.type == 'edit'){
                    this.loading = true
                    abcApi.findById(
                        {
                          code:this.item.sensorCode,
                          type:this.item.sensorType,
                          stationId:this.item.stationId
                        }
                    ).then((res)=>{
                        this.loading = false
                        this.form = res.data
                        
                    }).catch((err)=>{
                        this.loading = false
                        })
                }
            }else{
                this.$refs['form'].resetFields()
                Object.assign(this.$data,this.$options.data())
            }
        }
    },
    data(){
        return {
            loading:false,
            form:{
            },
            rules:{
                sensorName: [
                    { required: true, message: '请输入传感器名称', trigger: ['change','blur'], }
                ],
                sensorCode: [
                    { required: true, message: '请输入传感器编码', trigger: ['change','blur'], }
                ],
                stationId: [
                    { required: true, message: '请选择设备编码', trigger: ['change','blur'], }
                ],
                sensorNo: [
                    { required: true, message: '请输入设备号', trigger: ['change','blur'], }
                ],
                produceTime: [
                    { required: true, message: '请选择出厂日期', trigger: ['change','blur'], }
                ],
                sensorType: [
                    { required: true, message: '请选择传感器类型', trigger: ['change','blur'], }
                ],
                
            },
            // 下拉
            typeList:[],
            typeList1:[
              // {label:'温湿压',id:'01'},
              // {label:'水压',id:'02'},
              // {label:'雨量',id:'03'},
              // {label:'风速风向',id:'04'},
              // {label:'地质',id:'05'},
              // {label:'摄像头',id:'10'},
            ],
            
        }
    },
    methods:{
        // 获取下拉数据
        getDict() {
            abcApi.findAllStation({})
            .then(res => {
                this.typeList = res.data
            })

            commonApi.getByType('CGLX')
                .then(res => {
                    this.typeList1 = res.data
                })
                .catch(err => {
                    this.$message.error(err.message)
                })


        },

        onSave(){
            
            this.$refs['form'].validate((valid) => {
                if (valid) {
                  var api = this.type == 'add' ? abcApi.save : abcApi.update
                  this.loading = true
                  this.form.produceTime=formatTimestamp(this.form.produceTime,'yyyy-MM-dd hh:mm:ss');
                  api({
                      ...this.form
                  }).then((res)=>{
                      this.loading = false
                      this.$emit('onChange',{bool:false,refresh:true})
                      this.$message.success(res.message ||'提交成功')
                  }).catch((err)=>{
                      this.loading = false
                      this.$message.error(err.message||err.data.message)
                  })
                } else {
                    return false
                }
            })
        },

       
        onCancel(){
            this.$emit('onChange',{bool:false})
        },
        // 表格
        
        
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        max-height: 80vh;
        overflow-y: auto;
        // padding-bottom: 80px;
    }
    .width100{
        width: 100%;
    }
    .dialog_footer{
      display: flex;
      justify-content: center;
      // position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 20px 0;
      z-index: 1;
    }
    ::v-deep .tree_select .el-tree-node__content{
      height: 38px;
    }

</style>

